class Dialog {
    constructor(title,zIndex) {
        // this.first = true;
        this.zIndex = zIndex || 100;
        this.title = title || "";
        this.dialog = null;
        this.dialogTitle = null;
        this.dialogContent = null;
        this.id = `dialog_${new Date().getTime()}_${parseInt(Math.random() * 1000)}_${title.length}`;
        this.names = {
            dialog: ``,
            dialogContent: `-content`,
            dialogTitle: `-title`
        };
        this.init();
    }
    refreshDom(name) {
        if (name in this.names) {
            if (this[name].parentElement === null || this[name].parentElement.parentElement === null) {
                this[name] = document.getElementById(`${this.id}${this.names[name]}`);
            }
            return this[name];
        }
    }
    init() {
        document.head.innerHTML += `    <style>
        .${this.id} {
            display: block !important;
            position: fixed !important;
            left: -100vw !important;
            top: -100vh !important;
        }
        #${this.id} {
            display: none;
            position: fixed;
            z-index: ${this.zIndex};
            width: 80vw;
            height: 80vh;
            left: 10vw;
            top: 10vh;
            background: #e9e9e9;
            border-radius: 10px;
        }
        #${this.id}-title {
            height: 30px;
            line-height: 30px;
            padding: 0 20px;
            font-weight: bold;
        }
        #${this.id}-title .close {
            float: right;
            font-weight: bold;
            font-size: 10px;
            cursor: pointer;
        }
        #${this.id}-content {
            height: calc(100% - 30px);
        }
    </style>`
        document.body.innerHTML += `<div id="${this.id}" class="${this.id}">
    <div id="${this.id}-title">${this.title} <span class="close">关闭</span></div>
    <div id="${this.id}-content"></div>
</div>`;
        this.dialog = document.getElementById(this.id);
        this.dialogTitle = document.getElementById(this.id + '-title');
        this.dialogContent = document.getElementById(this.id + '-content');

    }
    setTitle(title) {
        this.refreshDom('dialogTitle').innerHTML = title;
    }
    show() {
        let $this = this;
        this.refreshDom('dialog').classList.remove(this.id);
        this.refreshDom('dialog').style.display = 'block';
        this.refreshDom('dialogTitle').getElementsByClassName('close')[0].onclick = function () {
            $this.dialog.style.display = 'none';
        }
    }
    hide() {
        this.refreshDom('dialog').style.display = 'none';
    }
}
